<template>
	<el-container>
		<el-header class="header">
			<div></div>
			<h2>学生信息管理系统</h2>
			<div>
				<span>欢迎你！{{ $store.state.userInfo.name }}</span>
				<el-button type="danger" circle icon="el-icon-switch-button" @click="quit"></el-button>
			</div>
		</el-header>
		<el-tabs tab-position="left" stretch style="min-height: calc(100vh - 10vw);padding-top: 2vw;" type="card">
			<template v-if="$store.state.userInfo.type == '2'">
				<el-tab-pane>
					<span slot="label">
						<i class="el-icon-monitor"></i>
						学生信息管理
					</span>
					<student-manage></student-manage>
				</el-tab-pane>
				<el-tab-pane>
					<span slot="label">
						<i class="el-icon-edit-outline"></i>
						课程管理
					</span>
					<course-manage></course-manage>
				</el-tab-pane>
				<el-tab-pane>
					<span slot="label">
						<i class="el-icon-s-data"></i>
						学生课程信息管理
					</span>
					<student-course-manage></student-course-manage>
				</el-tab-pane>
			</template>
			<template v-else>
				<el-tab-pane>
					<span slot="label">
						<i class="el-icon-s-data"></i>
						成绩管理
					</span>
					<grade-manage></grade-manage>
				</el-tab-pane>
			</template>
			<el-tab-pane>
				<span slot="label">
					<i class="el-icon-user"></i>
					个人信息管理
				</span>
				<personal-manage></personal-manage>
			</el-tab-pane>
			<el-tab-pane>
				<span slot="label">
					<i class="el-icon-key"></i>
					更改密码
				</span>
				<change-password></change-password>
			</el-tab-pane>
		</el-tabs>
		<el-main></el-main>
	</el-container>
</template>

<script>
import StudentManage from './studentManage.vue';
import CourseManage from './courseManage.vue';
import StudentCourseManage from './studentCourseManage.vue';
import PersonalManage from './personalManage.vue';
import ChangePassword from './changePassword.vue';
import GradeManage from './gradeManage.vue'
export default {
	components: {
		StudentManage,
		CourseManage,
		StudentCourseManage,
		PersonalManage,
		ChangePassword,
		GradeManage
	},
	mounted: function() {
		if (!this.$store.state.userInfo) {
			this.$message.error('登录已失效')
			setTimeout(()=>{
				this.$router.go(-1)
			},500)
		}
	},
	methods: {
		/**
		 * 退出登录
		 */
		quit() {
			console.log('退出登录');
			this.$message({
				message: '退出成功',
				type: 'success'
			});
			this.$router.go(-1);
			setTimeout(()=>{
				this.$store.commit('clearUser')
			},200)
		}
	}
};
</script>

<style>
.el-tabs__item {
	height: 60px;
	line-height: 60px;
}
</style>
<style scoped>
.header {
	width: 100vw;
	height: 5vw;
	background-color: #409eff;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 2vw;
	box-sizing: border-box;
	color: #fff;
}
.header h2 {
	font-size: 3em;
	font-weight: normal;
}
</style>
